@_b: ~'geomap-widget';
@_e: ~'bookmark';
@_be: ~'@{_b}-@{_e}';


// 组件样式
.geomap-widget {
  &-bookmark {
    background: #fff;
    color: #333;
    &__list {
      padding-left: 0;
      margin: 0;
      list-style: none;
      margin-bottom: 10px;
      &-card{
        margin-right: -10px;
      }
      &::after {
        content: '';
        display: block;
        clear: both;
      }
    }
    &__item {
      position: relative;
      &-text {
        line-height: 30px;
        height: 30px;
        display: flex;
        justify-content: space-between;
        border-radius: 4px;
        cursor: pointer;
        &:hover {
          background: rgba(244, 244, 244, .3);
        }

        .@{_be}__item-title {
          padding-left: 11px;
          // &:hover {
          //   color: lighten(#1890ff, 5%);
          // }
        }
        &-input {
          width: 100%;
          padding-left: 11px;
          padding-right: 60px;
        }
        &-btns {
          position: absolute;
          right: 0;
        }

      }

      &-card {
        float: left;
        width: 176px;
        height: 124px;
        margin-right: 10px;
        cursor: pointer;
        .@{_be}__item-card-img {
          display: block;
        }
        .@{_be}__item-title {
          display: block;
          text-align: center;
        }

        .@{_be}__item-btns {
          display: none;
          position: absolute;
          top: 10px;
          right: 0;
          z-index: 49;
          &-active {
            display: block;
          }
          &-disable {
            display: none;
          }
        }
        .@{_be}__item-btn {
          padding-right: 10px;
        }


        &:hover {
          .@{_be}__item-btns {
            display: block;
          }
          .@{_be}__item-card-img:after{
            opacity: 1;
          }
        }
        &-img {
          display: none;
          position: relative;
          width: 100%;
          height: 96px;
          background-position: center;
          background-size: cover;
          &::after {
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            width: 100%;
            // height: 96px;
            height: 100%;
            background: rgba(#000, 0.3);
            opacity: 0;
            z-index: 9;
            transition: opacity linear .2s;
          }
        }
      }

      &-title {
        font-size: 12px;
        // color: #333333;
      }

      &-input{
        background: rgba(#000, .3);
        border-radius: 4px;
        padding-left: 6px;
        &:focus,
        &:active{
          outline: 0;
          border-color: #2fb0ff;
        }
      }

      &-btn {
        padding-right: 10px;
        &:hover {
          color: #2fb0ff;
        }
        &-disable{
          color: rgba(#fff, .4) !important;
          cursor: not-allowed !important;
        }
      }
    }

    &__none {
      padding-top: 40px;
      text-align: center;
    }
    &__footer {
      &-btn{
        &-hide{
          display: block;
          height: 1px;
          overflow: hidden;
          visibility: hidden;
        }
      }
    }
  }
}
// :global {
// }
